<template>
  <div class="index-container">
    <NavBar :active-index="'2'" />
    <el-row
      v-infinite-scroll="() => fetchData()"
      class="page-list"
      infinite-scroll-immediate="false"
      style="overflow: auto"
    >
      <el-col
        :lg="{ span: 18, offset: 3 }"
        :sm="{ span: 20, offset: 2 }"
        :xs="{ span: 22, offset: 1 }"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          v-long-press="() => longPress(item)"
          class="item"
          @click="() => showDetail(item)"
        >
          <div class="row1">
            <div class="row1-1">
              <ww-open-data :openid="item.reqUserid" type="userName" />
              <span>{{ formatTime(item.createtime) }}</span>
              <span>申报</span>
            </div>
            <div v-if="item.status === 0" style="color: burlywood">未提交</div>
            <div v-if="item.status === 1" style="color: blue">审批中</div>
            <div v-if="item.status === 2" style="color: green">已通过</div>
            <div v-if="item.status === 3" style="color: red">已驳回</div>
            <div v-if="item.status === 4" style="color: darkgray">已取消</div>
          </div>
          <div class="row2">事由：{{ item.comment }}</div>
          <div class="row3">
            <div v-for="(course, index2) in item.courses" :key="index2">
              <div v-if="canView(item, course)" class="row3-item">
                <span>
                  代课{{ item.courses.length > 1 ? index2 + 1 : '' }}：
                </span>
                [
                <ww-open-data :openid="course.srcUserid" type="userName" />
                ->
                <ww-open-data :openid="course.tarUserid" type="userName" />
                ]
                {{ getCourseDesc(course) }}
              </div>
            </div>
          </div>
        </div>
        <div v-if="total > 0" class="item">
          <div class="nomore">没有更多了</div>
        </div>
        <div v-if="list.length == 0" class="item">
          <div class="nomore">暂无数据</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    gradeOptions,
    claszOptions,
    coursetimeOptions,
    subjectOptions,
  } from '@/config'
  import router from '@/router'
  import NavBar from '../components/NavBar.vue'
  import { useUserStore } from '@/store/modules/user'
  import { getList } from '@/api/dksb'
  import { formatTime } from '@/utils'

  import { Edit, Delete, Menu } from '@element-plus/icons-vue'
  import longPress from '@/utils/longpress'
  export default defineComponent({
    name: 'History',
    components: {
      NavBar,
    },
    directives: { longPress },
    setup() {
      const route = useRoute()
      // const router = useRouter()
      const userStore = useUserStore()
      // const { corpId, userId } = storeToRefs(userStore)
      const { corpId, userId } = userStore
      console.log(userId)

      const state = reactive({
        radio1: 0,
        list: [],
        total: 0,
        listLoading: true,
        selectRows: '',
        queryForm: {
          corpId: corpId,
          reqUserid: null,
          blurry: null,
          status: null,
          createtime: [],
          srcUserid: null,
          tarUserid: null,
          eventdate: [],
          grade: null,
          clasz: null,
          subject: null,
          coursetime: null,
          offset: 0,
          pageSize: 10,
        },
      })

      const setSelectRows = (val) => {
        state.selectRows = val
      }

      const fetchData = async (refresh = false) => {
        //路由参数判断
        const newValue = route.params.id
        if (newValue === '0') {
          state.queryForm.reqUserid = userId
          state.queryForm.srcUserid = userId
          state.queryForm.tarUserid = userId
        } else if (newValue === '1') {
          state.queryForm.reqUserid = userId
          state.queryForm.srcUserid = null
          state.queryForm.tarUserid = null
        } else if (newValue === '2') {
          state.queryForm.reqUserid = null
          state.queryForm.srcUserid = null
          state.queryForm.tarUserid = userId
        } else if (newValue === '3') {
          state.queryForm.reqUserid = null
          state.queryForm.srcUserid = userId
          state.queryForm.tarUserid = null
        }

        if (refresh) {
          state.total = 0
          state.queryForm.offset = 0
        } else {
          if (state.total > 0) return
          state.queryForm.offset = state.list.length
        }
        state.listLoading = true
        const { data: list } = await getList(state.queryForm)
        if (refresh) {
          state.list = list
        } else {
          if (list.length < state.queryForm.pageSize) {
            state.total = state.list.length + list.length
          }
          state.list.push(...list)
        }
        state.listLoading = false
      }

      const getCourseDesc = (course) => {
        const { eventdate, grade, clasz, coursetime, subject } = course
        return `${getOptLabel(
          subjectOptions,
          subject
        )} / ${eventdate} / ${getOptLabel(
          coursetimeOptions,
          coursetime
        )} / ${getOptLabel(gradeOptions, grade)} / ${getOptLabel(
          claszOptions,
          clasz
        )} `
      }

      const getOptLabel = (options, value) => {
        let label = ''
        options.some((op) => {
          if (op.value === value) {
            label = op.label
            return true
          }
          if (op.children) {
            label = getOptLabel(op.children, value)
            if (label) return true
          }
        })
        return label
      }

      const canView = (item, course) => {
        return (
          (item.reqUserid === userId &&
            (route.params.id === '0' || route.params.id === '1')) ||
          course.srcUserid === userId ||
          course.tarUserid === userId
        )
      }

      const showDetail = (item) => {
        console.log(item)
        router.push({ path: `/detail/${item.thirdNo}` }).then(() => {})
      }

      const longPress = (data) => {
        console.log('longPress detect。。。。', data)
      }

      onMounted(() => {
        fetchData(true)
      })

      /**
       * 监控路由变化
       */
      watch(
        () => route.params.id,
        (newValue, oldValue) => {
          //必须限定是history,不然切换到别的页面也会执行此方法
          console.log('route.path', route.path)
          if (route.path.startsWith('/history/') && newValue) {
            console.log('watch', newValue, oldValue)
            nextTick(() => {
              fetchData(true)
            })
          }
        },
        { immediate: false }
      )

      return {
        ...toRefs(state),
        fetchData,
        setSelectRows,
        getCourseDesc,
        longPress,
        Menu,
        Delete,
        Edit,
        formatTime,
        canView,
        showDetail,
      }
    },
  })
</script>
<style lang="scss">
  html {
    height: 100%;
    body {
      margin: 0;
      height: 100%;
      #app {
        margin: 0;
        height: 100%;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .index-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .page-list {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      .item {
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
        border-bottom: 1px var(--el-border-color) var(--el-border-style);
        &:hover {
          background-color: ghostwhite;
        }
        .row1 {
          display: inline-flex;
          justify-content: space-between;
          align-items: flex-start;
          flex: 0 0 auto;
          font-size: var(--el-font-size-base);
          color: var(--el-text-color-regular);
          height: 32px;
          line-height: 32px;

          .row1-1 {
            & > * {
              margin-right: 15px;
            }
          }
        }
        .row2 {
          font-size: 12px;
          color: #b1b3b8;
          line-height: 24px;
        }
        .row3 {
          display: flex;
          flex-direction: column;
          .row3-item {
            font-size: 12px;
            color: #b1b3b8;
            line-height: 24px;
          }
        }
        .nomore {
          font-size: 14px;
          color: #b1b3b8;
          line-height: 32px;
          text-align: center;
        }
      }
    }
  }
</style>
